<script setup>
import { getUserInfoByUserId } from '@/assets/api/user.js'
import { useMouse } from '@vueuse/core'
import { addChatChannel } from '@/assets/api/dialog-group.js'
import { ElMessage } from 'element-plus'
import useEventBus from '@/use/use-event-bus.js'
import useChannel from '@/store/channel.js'
import { useRouter } from 'vue-router'

const props = defineProps({
  modelValue: Boolean,
  userId: [String, Number, undefined],
})
const emit = defineEmits(['update:modelValue'])

const WIDTH = '264px'
const HEIGHT = '308px'
const userInfo = ref({})
const loading = ref(false)
const eventBus = useEventBus()
const channelStore = useChannel()
const router = useRouter()
const { x, y } = useMouse()
const position = ref({
  left: 0,
  top: 0,
})
const deptName = computed(() => {
  return userInfo.value?.dept?.deptName
})

watch(
  () => props.userId,
  (v) => {
    if (v) {
      getUserInfoData()
    } else {
      emit('update:modeValue', false)
    }
  }
)

watch(
  () => props.modelValue,
  (v) => {
    if (v) {
      let left = x.value
      let top = y.value
      // 超出右边
      if (left + parseInt(WIDTH) > window.innerWidth) {
        left -= parseInt(WIDTH)
      }
      // 超出下边
      if (top + parseInt(HEIGHT) > window.innerHeight) {
        top -= parseInt(HEIGHT)
      }
      position.value = {
        left: `${left}px`,
        top: `${top}px`,
      }
    }
  }
)

function getUserInfoData() {
  loading.value = true
  getUserInfoByUserId(props.userId).then((res) => {
    if (res.code === 200) {
      userInfo.value = res.data
    } else {
      ElMessage.error(res.msg)
    }
    nextTick(() => {
      loading.value = false
    })
  })
}

let lock = false
function createGroup() {
  if (!lock) {
    lock = true
    addChatChannel({
      channelMembers: [props.userId],
      type: 1,
    }).then((res) => {
      if (res.code === 200) {
        const fn = (data) => {
          channelStore.setDialog(data)
          router.push(`/chat?channelId=${data.id}`)
        }
        const index = channelStore.channelList.findIndex((i) => i.id === res.data.id)
        if (index !== -1) {
          fn(channelStore.channelList[index])
        } else {
          eventBus.on('channelCreated', fn)
        }
        emit('update:modelValue', false)
        lock = false
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}
</script>

<template>
  <Teleport to="body">
    <div v-if="props.modelValue" class="user-postcard" @click.self="emit('update:modelValue', false)">
      <div v-loading="loading" class="user-postcard-body" :style="position">
        <div class="postcard-bg">
          <el-avatar class="user-avatar" :src="userInfo.avatar">{{ userInfo.nickName?.slice(-2) }}</el-avatar>
        </div>
        <div class="postcard-detail">
          <div class="detail-name">
            <span>{{ userInfo.nickName }}</span>
            <span class="detail-dept-name">{{ deptName }}</span>
          </div>
          <div class="user-operations">
            <div class="opt-item" @click="createGroup">
              <SvgIcon name="contacts-message"></SvgIcon>
              <div>消息</div>
            </div>
            <div class="opt-item">
              <SvgIcon name="contacts-phone"></SvgIcon>
              <div>电话</div>
            </div>
            <div class="opt-item">
              <SvgIcon name="contacts-oa"></SvgIcon>
              <div>发送OA</div>
            </div>
          </div>
          <div class="extra-info">
            <div>电话: {{ userInfo.phonenumber }}</div>
            <div>邮箱: {{ userInfo.email }}</div>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped lang="scss">
.user-postcard {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  .user-postcard-body {
    position: absolute;
    height: v-bind(HEIGHT);
    width: v-bind(WIDTH);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 6px rgba(82, 106, 222, 0.3);
    z-index: 1;
    .postcard-bg {
      position: relative;
      height: 94px;
      background-image: url('@/assets/image/user-postcard-bg.png');
      background-size: 100%;
      .user-avatar {
        position: absolute;
        left: 20px;
        bottom: 0;
        transform: translateY(50%);
      }
    }
    .postcard-detail {
      height: calc(100% - 94px);
      padding: 30px 20px 20px;
      .detail-name {
        font-size: 16px;
        padding: 10px 0;
        .detail-dept-name {
          font-size: 12px;
          padding-left: 5px;
          color: #666666;
        }
      }
      .user-operations {
        @include use-flex(center, space-between);
        .opt-item {
          cursor: pointer;
          text-align: center;
          height: 50px;
          width: 68px;
          border-radius: 6px;
          padding-top: 5px;
          color: #666666;
          background-color: rgba(102, 102, 102, 0.1);
          & > div {
            font-size: 12px;
          }
          &:hover {
            color: #0d53ff;
            background-color: rgba(13, 83, 255, 0.1);
          }
        }
      }
      .extra-info {
        font-size: 12px;
        padding-top: 20px;
        & > div {
          color: #666666;
          padding: 5px 0;
        }
      }
    }
  }
}
</style>
